<template>
  <div id="app">
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <form action="/">
      <van-search
        show-action
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
        @search="onSearch"
        v-model="words"
      />

      <!-- <div v-if="words !== ''"> -->
      <div v-if="words!=''">
        <!-- 搜索提示 -->
        <ul class="search-hint">
          <li v-for="item in serachlist" :key="item.id">
            <p v-show="bol" @click="getlist(item.name)">{{ item.name }}</p>
          </li>
        </ul>
      </div>



      <div v-else>

        <div v-if="history.length != 0">
          <div class="search-icon">
            <p>历史记录</p> 
            <span @click="emptyHistory"></span>
          </div>
          <ul class="search-hist">
            <li v-for="item in history" :key="item.id">
              <p>{{ item.keyword }}</p>
            </li>
          </ul>
        </div>

        <div class="hot-search">热门搜索</div>
        <ul class="hotlist">
          <li v-for="item in hotList.hotKeywordList" :key="item.id">
            <p @click="showKeyWords(item.keyword)">{{ item.keyword }}</p>
          </li>
        </ul>
      </div>


      <!-- 搜索提示点击出现商品 -->
      <ul class="getlist">
        <li v-for="item in getList" :key="item.id">
          <img :src="item.list_pic_url" alt="">
          <p>{{item.name}}</p>
          <p>￥{{item.retail_price}}</p>
        </li>
      </ul>


    </form>
  </div>
</template>

<script type="text/javascript">
// import { home } from "@/api/home/index";
import {
  touchsearch,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/touchsearch/index";
export default {
  data() {
    return {
      openId: localStorage.getItem("openId"),
      hotList: [],
      keyWord: [],
      history: [],
      serachlist: [],
      words:"",
      getList:[],
      bol : true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onCancel() {
      this.$router.push("/");
    },
    showKeyWords(val) {
      // console.log(val);
      this.words = val;
      this.onSearch();
    },

    onSearch() {      
      //搜索的关键词添加到数据库
        addhistoryaction({
          openId: this.openId,
          keyword: this.words,
        }).then((rest) => {
          console.log(rest);
        });   
    },


    emptyHistory(){
      //请空搜索记录 
      clearhistoryAction({
        openId: this.openId,
      }).then((resu)=>{
        console.log(resu);
        this.history = resu
      })
    },

    // 搜索提示接口
    getlist(val){
        helperaction({
        keyword: val,
        // order: "asc",
      }).then((result) => {
        // this.serachlist = result.keywords;
        this.getList = result.keywords;
        console.log(this.getList);
      });
      this.bol = !this.bol
    }
  },
  computed: {},
  components: {},
  created() {
    // 关键词和搜索历史接口
    touchsearch({
      openId: this.openId,
    }).then((res) => {
      console.log(res);
      this.hotList = res;
      this.history = res.historyData;
      // console.log(this.history)
    }); 
  },

  mounted() {},

  watch:{
    // 搜索提示接口
    words(){
      // console.log(1)
      helperaction({
        keyword: this.words,
        order: "asc",
      }).then((result) => {
        this.serachlist = result.keywords;
        // console.log(this.serachlist);
      });
    }
  }
};
</script>

<style scoped lang="scss">
#app {
  position: relative;
}
.hot-search {
  text-align: left;
  padding-left: 13px;
}
// 热门搜索
.hotlist {
  width: 343px;
  display: flex;
  flex-wrap: wrap;
  & li:first-child p {
    border: 1px solid #b4282d;
    color: #b4282d;
  }
  li {
    margin-left: 15px;

    p {
      width: auto;
      height: 30px;
      line-height: 30px;
      border: 1px solid #999;
      padding: 0 5px;
    }
  }
}
//搜索历史
.search-hist {
  width: 343px;
  display: flex;
  flex-wrap: wrap;
  & li:first-child p {
    border: 1px solid #b4282d;
    color: #b4282d;
  }
  li {
    margin-left: 15px;

    p {
      width: auto;
      height: 30px;
      line-height: 30px;
      border: 1px solid #999;
      padding: 0 5px;
    }
  }
}
// 搜索提示
.search-hint {
  // position: absolute;
  // top: 100px;
  // left: 0;
  width: 100%;
  // height: 500px;
  padding-left: 15px;
  text-align: left;
  z-index: 10;
  background-color: #fff;
}

.search-icon{
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  span{
    width: 27px;
    height: 27px;
    display: inline-block;
    background: url(../../../assets/img/images/delete.png) no-repeat;
    background-size: cover;
  }

}

.getlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li{
    width: 187.5px;
    height: 239.5px;
    border-right: 1px solid #999;
    & :last-child{
      color: #b4282d;
    }
  }
  img{
    width: 151px;
    height: 151px;
  }
}
</style>
